<template>
    <div class="box">

    </div>
</template>

<script>
import { getEchart } from '@/api';
import * as echarts from 'echarts'
export default {
    data() {
        return {
            echartList: []
        }
    },
    mounted() {
        this.getEchartList()


    },
    methods: {
        async getEchartList() {
            let res = await getEchart()
            // this.echartList = res.year
            // console.log(this.echartList);
            let op = echarts.init(document.querySelector('.box'))
            let option = {
                title: {
                    text: "2021全学科薪资走势",
                    left: 20,
                    top: 10,
                },
                tooltip: {
                    show: true,
                    trigger: "axis"
                },
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#499dee' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#5c76f0' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                xAxis: {
                    type: 'category',
                    data: res.year.map(item => {
                        return item['month']
                    }),
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#ccc",
                            type: "dashed"
                        }
                    }
                },
                series: [
                    {
                        data: res.year.map(item => {
                            return item['salary']
                        }),
                    type: 'line',
                    symbolSize: 10,
                    smooth: true,
                    lineStyle: {
                        width: 7,
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#8cc2f4' // 0% 处的颜色
                            },
                            {
                                offset: 0.8, color: '#fff' // 0% 处的颜色
                            },
                            {
                                offset: 1, color: '#fff' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    },

                ],

        };
        op.setOption(option)
    }
},
}
</script>

<style>
.box {
    width: 100%;
    height: 100%;
}
</style>